<template>
	<view class="fileParent" >
		
		<view class="imb_con" v-if="dataList && dataList.length >0">
			
			
			<!-- 单图 -->
			<view class="picstyle1" v-if="dataList.length == 1">	
			
				<view class="img_p" :key="ind" v-for="(it,ind) in dataList">
					<image 	:style="{width:bigWidth,height:bigHeight,'border-radius':radius}"
							:mode="imgMode" :src="getSrc(it)"
							@tap.stop="onPreviewTap(it)" >
					</image>
					<cover-view v-if="getFileType(it)  === 2"  class="f_video_fixed" :style="{width:bigWidth,height:bigHeight}">
						<view class="f_play_p" @tap.stop="onPreviewTap(it)" >
							<image class="f_play" src="/static/icon/play.png" mode="widthFix"></image>
							<view class="f_duration" v-if="it.video">{{it.video.videoDuration | formattedDuration}}</view>
						</view>
					</cover-view>
				</view>
				
			</view>
			
			
			<!-- 两图 -->
			<view class="picstyle2" v-else-if="dataList.length == 2">	
				<view class="img_p" :key="ind" v-for="(it,ind) in dataList">
					<image 	:style="{width:midWidth,height:midHeight,'border-radius':radius}"
							:mode="imgMode"  :src="getSrc(it)"
							@tap.stop="onPreviewTap(it)"  >
					</image>
					<cover-view v-if="getFileType(it)  === 2"  class="f_video_fixed" :style="{width:midWidth,height:midHeight}">
						<view class="f_play_p" @tap.stop="onPreviewTap(it)" >
							<image class="f_play" src="/static/icon/play.png" mode="widthFix"></image>
							<view class="f_duration" v-if="it.video">{{it.video.videoDuration | formattedDuration}}</view>
						</view>
					</cover-view>
				</view>
			</view>
				
				
			<!-- 多图 -->
			<view class="picstyle" v-else>	
				<view class="img_p" :key="ind" v-for="(it,ind) in dataList">
					<image :style="{width:smlWidth,height:smlHeight,'border-radius':radius,'margin-right':space,'margin-bottom':space}" 
							:mode="imgMode" :src="getSrc(it)"
							@tap.stop="onPreviewTap(it)" >
					</image>
					<cover-view v-if="getFileType(it)  === 2"  class="f_video_fixed" :style="{width:smlWidth,height:smlHeight}">
						<view class="f_play_p" @tap.stop="onPreviewTap(it)" >
							<image class="f_play" src="/static/icon/play.png" mode="widthFix"></image>
							<view class="f_duration" v-if="it.video">{{it.video.videoDuration | formattedDuration}}</view>
						</view>
					</cover-view>
				</view>
			</view>
			
			
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "fileList",
		props: {
			// 数据对象
			dataList: {
				type: Array,
				default () {
					return []
				}
			},
			// 组件内部播放视频
			innerPalyVideo: {
			    type: Boolean,
			    default: false
			},
			imgMode:{type:String,required:false,default:'aspectFill'},
			// 图片圆角大小
			radius:{type:String,required:false,default:'2rpx'},
			// 多图间距
			space:{type:String,required:false,default:'8rpx'},
			// 大图宽度
			bigWidth:{type:String,required:false,default:'400rpx'},
			// 大图高度
			bigHeight:{type:String,required:false,default:'300rpx'},
			// 中图宽度
			midWidth:{type:String,required:false,default:'335rpx'},
			//  中图宽度
			midHeight:{type:String,required:false,default:'240rpx'},
			// 
			smlWidth:{type:String,required:false,default:'218rpx'},
			// 
			smlHeight:{type:String,required:false,default:'200rpx'},
		},
		components: {
			
		},
		data() {
			return {
				keyName: 'url',
			}
		},	
		methods: {
			/**
			 * 获取文件类型
			 * @param {Object} suffix 文件后缀名
			 * returns 图片：1，视频：2
			 */
			getFileType(fileObj) {
				let type = -1
				if (!fileObj || !fileObj.fileSuffix){
					return type
				}
				let suffix = fileObj.fileSuffix
				if (['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp', 'psd', 'svg', 'tiff'].indexOf(suffix) !== -1){
					type = 1
				}
				if (['avi','wmv','mpeg','mp4','m4v','mov','asf','flv','f4v','rmvb','rm','3gp','vob'].indexOf(suffix) !== -1){
					type = 2
				}
				return type
			},
			// 获取图片的路径
			getSrc(item) {
				if (this.getFileType(item) == 1){
					return item[this.keyName]
				}
				if (this.getFileType(item) == 2){
					return uni.$u.test.object(item.video)? item.video.cover: item[this.keyName]
				} 
			},
			// 预览
			onPreviewTap(file) {
				let t = this.getFileType(file)
				// 预览视频
				if(t==2){
					if(this.innerPaly){
						this.$nextTick(()=>{
							this.$refs.play.initPlay(file[this.keyName])
						})
					}else{
						this.$emit('video_play',file[this.keyName])
					}
				}else{
					let current = file.url
					let urlArr = []
					for (var i = 0; i < this.dataList.length; i++) {
						let turl = this.dataList[i][this.keyName]
						if(this.getFileType(this.dataList[i]) === 1){
							urlArr.push(turl)
						}else if(turl === current){
							continue
						}
					}
					uni.previewImage({
					    current: current,
					    urls: urlArr
					})
				}
			},

		}
	}
</script>

<style scoped lang="scss">
	
	.fileParent {
		padding: 5px 0 12px 0;
	}
	
	.img_p{
		 position: relative;
	}
	
	.imb_con image{
		display: block;
	}
	.picstyle2{
		display: flex;
		justify-content: space-between;
	}
	.picstyle{
		display: flex;
		justify-content:flex-start;
		flex-wrap:wrap;
	}
	.picstyle image:nth-child(3n){
		margin-right:0rpx !important;
	}
	.f_video_fixed {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 9;
	}
	.f_play_p{
		display: flex;
		flex-direction: column;
		justify-content: center; 
		align-items: center;
		height: 100%;
	}
	.f_play {
		width: 30%;
	}
	.f_duration{
		padding-top: 5px;
		text-align: center;
		color: #fff;
		font-size: 13px
	}
	
</style>
